<template>
    <div class='app-content recevie-detail'>
        <div class="adviser-info">
            <avatar class="avatar" :src="src"></avatar>
            <div class="con">
                <div class="name">
                    <div class="text">吴瑞丽</div>
                </div>
                <div class="sub">北京销售团队</div>
            </div>
            <router-link class="goHome" :to="{path:'/index'}" replace>返回首页</router-link>
        </div>
        <div class="app-view">
            <div  class="scroll">
                <div class="collapse">
                    <div class="collapse-item" v-for="(item,index) in collapse" :key="index">
                        <div class="collapse-item-title clearfix" @click="collapseToggle(index)">
                            <div class="left">
                                <i class="iconfont icon-shizhong"></i>
                                <span class="time">{{item.time}}</span>
                            </div>
                            <div class="sprend display-flex align-items-center" :class="[activesName['name_'+index]?'close-collapse':'open-collapse']">
                                <i class="iconfont icon-arrow-down"></i>
                                <span class="open">展开</span>
                                <span class="close">收起</span>
                            </div>
                        </div>
                        <div class="collapse-item-body" :class="[activesName['name_'+index]?'':'rows2']">
                            <ul class="customer-attribute">
                                <li class="clearfix">
                                    <div class="tit">
                                        <i class="iconfont icon-yonghu"></i>
                                        <span class="txt">客户姓名：</span>
                                    </div>
                                    <div class="con">{{item.name}}</div>
                                </li>
                                <li class="clearfix">
                                    <div class="tit">
                                        <i class="iconfont icon-shouji"></i>
                                        <span class="txt">手机号码：</span>
                                    </div>
                                    <div class="con">{{item.mobile}}</div>
                                </li>
                                <li class="clearfix">
                                    <div class="tit">
                                        <i class="iconfont icon-laiyuan"></i>
                                        <span class="txt">客户来源：</span>
                                    </div>
                                    <div class="con">{{item.source}}</div>
                                </li>
                                <li class="clearfix">
                                    <div class="tit">
                                        <i class="iconfont icon-lujing"></i>
                                        <span class="txt">认知途径：</span>
                                    </div>
                                    <div class="con">{{item.from}}</div>
                                </li>
                                <li class="clearfix">
                                    <div class="tit">
                                        <i class="iconfont icon-renshu"></i>
                                        <span class="txt">来访人数：</span>
                                    </div>
                                    <div class="con">{{item.num}}</div>
                                </li>
                                <li class="clearfix">
                                    <div class="tit">
                                        <i class="iconfont icon-beizhu"></i>
                                        <span class="txt">备注信息：</span>
                                    </div>
                                    <div class="con">{{item.memo}}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import avatar from "@/components/Avatar/index.vue"
export default {
    name: '',
    data() { 
        return {
            activesName:{},
            collapse:[
                {
                    time:'12:12',
                    name:"富国豪（男）",
                    mobile:"18888888888",
                    source:"自然来源-自然来访",
                    from:"网络媒体",
                    num:"3",
                    memo:"看房源"
                },
                {
                    time:'14:12',
                    name:"富国美（女）",
                    mobile:"18888888888",
                    source:"自然来源-自然来访",
                    from:"网络媒体",
                    num:"3",
                    memo:"看房源"
                }
            ]
        }
    },
    props: {

    },
    components:{
        avatar
    },
    mounted() {

    },
    methods:{
        collapseToggle(index){
            if(this.activesName['name_'+index]){
                this.$set(this.activesName,'name_'+index,false);
            }else{
                this.$set(this.activesName,'name_'+index,true);
            }
        }
    },
}
</script>

<style lang='scss' scoped>
.app-content{
    flex:1;
    overflow: hidden;
    display:flex;
    flex-direction: column;
    .app-view{
        flex:1;
        overflow: hidden;
        margin-bottom:0.5rem;
        display:flex;
        flex-direction: column;
        box-sizing: border-box;
        padding:0.6rem;
        .scroll{
            height:100%;
            overflow:auto;
            -webkit-overflow-scrolling: touch   ;
        }
    }
}
.van-collapse-item--border::after,[class*=van-hairline]::after{
    display:none;
}
.adviser-info{
    padding:0.8rem 0.7rem;
    display:flex;
    align-items: center;
    position:relative;
    .avatar{
        width:1.8rem;
        height:1.8rem;
    }
    .con{
        margin-left:0.5rem;
        line-height: 1;
        .name{
            font-size:0.4rem;
            display:flex;
            align-items: center;
            color:#fff;
            .state{
                margin-left:0.3rem;
                border-radius: 3px;
                overflow: hidden;
                .signed{
                    display:block;
                    padding:0 0.15rem;
                    font-size:0.28rem;
                    line-height: 0.45rem;
                }
            }
        }
        .sub{
            font-size:0.34rem;
            color:rgba(255,255,255,0.5);
            margin-top:0.3rem;
        }
    }
    .goHome{
        position:absolute;
        right:0.7rem;
        top:50%;
        transform:translateY(-50%);
        width:2.2rem;
        line-height: 0.7rem;
        border-radius: 5px;
        background-color:#fff;
        color:#017df1;
        font-size:0.3rem;
        text-align: center;
    }
}
.collapse{
    .collapse-item-title{
        line-height: 0.85rem;
        border-radius: 5px;
        padding:0 0.35rem;
        margin-bottom:0.3rem;
        .sprend{
            float:right;
            font-size:0.28rem;
            .iconfont{
                font-size:0.28rem;
                margin-right:5px;
                transition: transform 300ms ease;
            }
        }
        .open-collapse{
            .close{
                display:none;
            }
        }
        .close-collapse{
            .iconfont{
                transform: rotate(180deg);
            }
            .open{
                display:none;
            }
        }
        .left{
            font-size:0.34rem;
            float:left;
            .iconfont{
                font-size:0.34rem;
                margin-right:10px;
            }
        }
    }
    .collapse-item+.collapse-item{
        margin-top:0.6rem;
    }
}
.customer-attribute{
    font-size:0;
    line-height: 0;
    li{
        padding:0.3rem 0;
        display:inline-block;
        width:100%;
        font-size:0.34rem;
        line-height: 0.6rem;
    }
    .tit{
        float:left;
        .iconfont{
            color:#999999;
            font-size:0.4rem;
            width:1rem;
            text-align: center;
            display:inline-block;
            vertical-align: middle;
        }
        .txt{
            display:inline-block;
            vertical-align: middle;
            padding:0 5px;
        }
    }
    .con{
        float:none;
        overflow: hidden;
    }
}
</style>